<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="${pageContext.request.contextPath }/bootstrap/img/favicon.ico">
<link href="${pageContext.request.contextPath }/bootstrap/css/style.min.css?v=4.0.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrap/css/animate.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrap/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrap/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrap/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap/css/jquery-confirm.css"/>
<title>菜单管理</title>
</head>
<body>
	
	<!-- 动态加载table -->
	<table id="Rolestab" class="table table-hover"></table>
	
	<div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
		<button id="btn_edit" type="button" class="btn btn-default" style="display: none;" border-radius: 0">
			<span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>修改
		</button>
		<button id="btn_delete" type="button" class="btn btn-default" style="display: none;">
			<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
		</button>
		<button id="btn_add" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
		</button>
	</div>
	<div class="modal inmodal fade" id="MenuModal" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="menu_modal_title">新增菜单</h4>
               	</div>
                <div class="modal-body">
                	<input type="hidden" id="submittype"/>
                	<input type="hidden" id="menuid"/>
                	<div class="row">
                		<div class="col-sm-6">
                			<div class="form-group draggable">
		                    	<label class="control-label">菜单名称：</label>
		                        <input type="text" name="menuname" id="menuname" onkeyup="this.value=this.value.replace(/\s+/g,'')" class="form-control" placeholder="菜单名称">
		                   	</div>
                		</div>
                	</div>
                	<div class="row">
                		<div class="col-sm-6">
                			<div class="form-group draggable">
		                    	<label class="control-label">菜单等级：</label>
		                    	<select class="form-control" name="menutitle" id="menutitle" onchange="MenuChange(this.value)">
									<option value="0">---请选择---</option>
									<option value="1">一级菜单</option>
									<option value="2">二级菜单</option>
								</select>
		                   	</div>
                		</div>
                	</div>
                	<div class="row" id="fathermenuDIV" style="display: none;">
                		<div class="col-sm-6">
                			<div class="form-group draggable">
		                    	<label class="control-label">选择父菜单：</label>
		                    	<select class="form-control" name="fathermenu" id="fathermenu">
									<option value="0">---请选择---</option>
									<option value="1">一级菜单</option>
									<option value="2">二级菜单</option>
								</select>
		                   	</div>
                		</div>
                	</div>
                	<div class="row">
                		<div class="col-sm-6">
                			<div class="form-group draggable">
		                    	<label class="control-label">菜单URL：</label>
		                        <input type="text" name="menuurl" id="menuurl" onkeyup="this.value=this.value.replace(/\s+/g,'')" class="form-control" placeholder="菜单url，例如/SystemManage/Main/XXX/XXX.action">
		                   	</div>
                		</div>
                	</div>
                </div>
				<div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                	<button type="button" class="btn btn-primary" onclick="MenuSubmit()" id="MenuBtn">提交</button>
           		</div>
           	</div>
        </div>
	</div>
	<script src="${pageContext.request.contextPath }/bootstrap/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrap/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrap/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrap/js/jquery-confirm.js"></script>
    <script type="text/javascript">
    $(window).resize(function() {
        $('#Rolestab').bootstrapTable('resetView', {
            height: tableHeight()
        })
    })
    //查询按钮事件
    $('#search_btn').click(function(){
        //$('#doctortab').bootstrapTable('refresh');
        $('#Rolestab').bootstrapTable('refresh',{url: '${pageContext.request.contextPath}/Main/DynamicMenu/listadminmenuAjax.action'});
    })
    //tableHeight函数
    function tableHeight(){
        //可以根据自己页面情况进行调整
        return $(window).height()-220;
    }
  	function refreshTab(){
  		$('#Rolestab').bootstrapTable('refresh');
  	}
	//生成用户数据
    $('#Rolestab').bootstrapTable({
        method: 'get',
        contentType: "application/x-www-form-urlencoded",//必须要有！！！！
        url:"${pageContext.request.contextPath}/Main/DynamicMenu/listadminmenuAjax.action",//要请求数据的文件路径
        height:tableHeight(),//高度调整
        striped: true, //是否显示行间隔色
        dataField: "rows",//bootstrap table 可以前端分页也可以后端分页，这里
        //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的  
        //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
        pageNumber: 1, //初始化加载第一页，默认第一页
        pagination:true,//是否分页
        queryParamsType:'limit',//查询参数组织方式
        queryParams:function(params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的    
            return {//这里的params是table提供的    
                offset : params.offset,//从数据库第几条记录开始    
                limit : params.limit,
                menufatherid : -1
            //找多少条    
            };},//请求服务器时所传的参数
        sidePagination:'server',//指定服务器端分页
        pageSize:10,//单页记录数
        pageList:[1,5,10,30,50,100],//分页步进值
        showRefresh:true,//刷新按钮
        showColumns:true,
        clickToSelect: true,//是否启用点击选中行
        toolbarAlign:'right',//工具栏对齐方式
        buttonsAlign:'right',//按钮对齐方式
        toolbar:'#toolbar',//指定工作栏
        columns:[
            {
                title:'全选',
                field:'select',
                //复选框
                checkbox:true,
                width:25,
                align:'center',
                valign:'middle'
            },
            {
                title:'菜单ID',
                field:'menuid'
            },
            {
                title:'菜单名称',
                field:'menuname'
            },
            {
                title:'菜单父ID',
                field:'menufatherid',
              	formatter:menufatherid
            },
            {
                title:'菜单等级',
                field:'menutitle',
                formatter:menutitle
            },
            {
                title:'菜单url',
                field:'menuurl'
            },
            {
                title:'操作',
                field:'operate',
              	//列数据格式化
                formatter:operate
            },
        ],
        locale:'zh-CN',//中文支持,
        responseHandler:function(rows){
            //在ajax获取到数据，渲染表格之前，修改数据源
            return rows;
        }
    })
    //操作序列规则化
	function operate(value,row,index){
		var menuid=row.menuid;
		var menuname="'"+row.menuname+"'";
		var menufatherid="'"+row.menufatherid+"'";
		var menuurl="'"+row.menuurl+"'";
    	return '<button class="btn btn-info" style="height:30px" onclick="editMenu('+menuid+','+menuname+','+menufatherid+','+menuurl+')">编辑</button>&nbsp;&nbsp;<button class="btn btn-warning" id="delete'+menuid+'" style="height:30px" onclick="deleteMenu('+menuid+')">删除</button>';
	}
	function menutitle(value,row,index){
		if(row.menufatherid=="0"){
			return "一级菜单";
		}else{
			return "二级菜单";
		}
	}
	function menufatherid(value,row,index){
		if(value=="0"){
			return "无";
		}else{
			return value;
		}
    }
	
	
    $('#btn_add').click(function(){
    	$("#MenuModal").modal('show');
    	$("#fathermenuDIV").hide();
    	$("#submittype").val(1);
    	$("#menuid").val("");
    	$("#menuname").val("");
    	$("#menuurl").val("");
    	$("select#menutitle").val(0);
    	$("select#fathermenu").val(0);
    	$("#menu_modal_title").html("新增菜单");
    })
    function MenuChange(value){
    	if(value=="1"){
    		$("#fathermenuDIV").hide();
    	}else if(value=="2"){
    		$("#fathermenuDIV").show();
    	}else{
    		$("#fathermenuDIV").hide();
    	}
    }
    function MenuSubmit(){
    	var submittype=$("#submittype").val();
    	var menuid=$("#menuid").val();
    	var menuname = $("#menuname").val();
    	var menutitle = $("#menutitle").val();
    	var menufatherid;
    	var fathermenu = $("#fathermenu").val();
    	var menuurl = $("#menuurl").val();
    	if(menuname=="" || menutitle=="0"){
    		$.alert("信息不可为空！");
    		return false;
    	}
    	if(menutitle==2 && (fathermenu=="0" || menuurl=="")){
    		$.alert("二级菜单需要选择父菜单,并且不可缺少url");
    		return false;
    	}
    	if(menutitle==1){
    		menufatherid=0;
    	}else if(menutitle==2){
    		menufatherid=fathermenu;
    	}
    	var param;
    	var url;
    	if(submittype==1){
    		param="menuname="+menuname+"&menufatherid="+menufatherid+"&menuurl="+menuurl;
    		url="${pageContext.request.contextPath}/Main/DynamicMenu/addadminmenu.action";
    	}else if(submittype==2){
    		param="menuid="+menuid+"&menuname="+menuname+"&menufatherid="+menufatherid+"&menuurl="+menuurl;
    		url="${pageContext.request.contextPath}/Main/DynamicMenu/updateadminmenu.action";
    	}
    	$("#MenuBtn").html('<i class="fa fa-spinner fa-spin"></i>处理中...');
		$("#MenuBtn").prop('disabled',true);
		ADDorEDIT(url,param);
    }
    function ADDorEDIT(url,param){
    	$.ajax({
    		type:"post",
    		url:url,
    		data:param,
    		async:true,
    		success:function(data){
    			$("#MenuBtn").html('提交');
    			$("#MenuBtn").prop('disabled',false);
    			$.alert(data.msg);
    			if(data.code=="100"){
	    			refreshTab();
    				$("#MenuModal").modal('hide');
    			}
    		},error:function(request){
    			$("#MenuBtn").html('提交');
    			$("#MenuBtn").prop('disabled',false);
    			$.alert("服务器连接错误");
    		}
    	})
    }
    function deleteMenu(menuid){
    	$.confirm({
    		title:'提示！',
    		content:'您确定删除？',
    		type:'blue',
    		typeAnimated:true,
    		buttons:{
    			确定:function(){
    				$("#delete"+menuid).html('<i class="fa fa-spinner fa-spin"></i>处理中...');
    				$("#delete"+menuid).prop('disabled',true);
    				$.ajax({
    					type:'post',
    					url:"${pageContext.request.contextPath}/Main/DynamicMenu/deletemenu.action",
    					data:"menuid="+menuid,
    					async:true,
    					success:function(data){
    						$("#delete"+menuid).html('删除');
    	    				$("#delete"+menuid).prop('disabled',false);
    	    				$.alert(data.msg);
    	    				if(data.code=="100"){
    	    					refreshTab();
    	    				}
    					},
    					error:function(request){
    						$("#delete"+menuid).html('删除');
    	    				$("#delete"+menuid).prop('disabled',false);
    	    				$.alert('服务器链接错误！');
    					}
    				});
    			},
    			取消:function(){},
    		}
    	});
    }
    function editMenu(menuid,menuname,menufatherid,menuurl){
    	$("#menu_modal_title").html("编辑菜单");
    	var menutitle;
    	$("#MenuModal").modal('show');
    	$("#submittype").val(2);
    	menutitle=(menufatherid=="0")?1:2;
    	//alert(menuid+":"+menuname+":"+menufatherid+":"+menuurl+":"+menutitle);
    	$("#menuid").val(menuid);
    	$("#menuname").val(menuname);
    	$("#menuurl").val(menuurl);
    	if(menufatherid==0){
    		$("select#menutitle").val(1);
    		$("#fathermenuDIV").hide();
    	}else{
    		$("select#menutitle").val(2);
    		$("#fathermenuDIV").show();
    		$("select#fathermenu").val(menufatherid);
    	}
    }
    /* 加载一级菜单下拉框 */
    function loadFmenu(){
    	$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath}/Main/DynamicMenu/getadminmenu.action",
			async: true,
			data:"menufatherid=0",
    		success:function(data){
    			//alert("data.details.docname="+data.details.docname);
    			if(data.code==100){
    				var datalist = data.list;
                    for (var i = 0; i < datalist.length; i++) {  
                        $('#fathermenu').append("<option value='" + datalist[i].menuid + "' >" + datalist[i].menuname + "</option>");  
                    }
    			}else{
    				$.alert(data.msg);
    			}
    		},error:function(){
    			$.alert("加载一级菜单失败!!!");
    		}
		})
    }
    $(function(){
    	loadFmenu();
    })
    </script>
</body>
</html>